<template>
	<a-row type="flex" :gutter="10" style="max-height: 800px">
		<a-col :xl="5" :lg="24" :md="24" style="margin-top: 20px;background-color: #ffffffe6;">
			<a-input-search v-model:value="searchValue" placeholder="在我的文件中搜索" style="width: 100%"
				@search="searchQuery" />
			<br />
			<a-button size="large" type="text" style="width: 100%">
				<template #icon>
					<SearchOutlined />
				</template>
				我的文件
			</a-button>
			<br />
			<a-button size="large" type="text" style="width: 100%">
				<template #icon>
					<SearchOutlined />
				</template>
				最近使用
			</a-button>
			<br />
			<a-button size="large" type="text" style="width: 100%">
				<template #icon>
					<SearchOutlined />
				</template>
				星标文件
			</a-button>
			<a-divider />
			<a-button size="large" type="text" style="width: 100%">
				<template #icon>
					<SearchOutlined />
				</template>
				共享网盘
			</a-button>
		</a-col>
		<a-col :xl="18" :lg="24" :md="24" style="margin-top: 20px;">
			<a-row style="margin-bottom: 10px;background-color: #ffffffe6;">
				<a-col>
					<h3 style="float: left;text-align: center;">我的文件</h3>
					<!-- <a-button style="float: right;" @click="handleAdd">
						<template #icon>
							<SearchOutlined />
						</template>
						添加
					</a-button> -->
					<a-dropdown>
						<template #overlay>
							<a-menu @click="handleMenuClick">
								<a-menu-item key="1">上传本地文件</a-menu-item>
								<!-- <a-menu-item key="2">添加链接文件</a-menu-item> -->
								<a-menu-item key="3">新建文件夹</a-menu-item>
							</a-menu>
						</template>
						<a-button style="float: right;">
							添加
							<DownOutlined />
						</a-button>
					</a-dropdown>
				</a-col>
			</a-row>

			<a-row>
				<a-col>
					<!--引用表格-->
					<BasicTable @register="registerTable" @edit-end="handleEditEnd" />
				</a-col>
			</a-row>
		</a-col>

		<!-- 表单区域 -->
		<TbFileModal ref="registerModal" @success="handleSuccess"></TbFileModal>
	</a-row>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
	import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
	import { useListPage } from '/@/hooks/system/useListPage';
	import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, updateById } from './TbFile.api';
	import TbFileModal from './components/TbFileModal.vue'
	import { mapTableTotalSummary } from "@/utils/common/compUtils";
	import { useMessage } from '/@/hooks/web/useMessage';

	const queryParam = reactive<any>({});
	const registerModal = ref();
	const searchValue = ref<string>('');

	const { createMessage } = useMessage();
	const emit = defineEmits(['register', 'ok']);
	const columns : BasicColumn[] = [
		{
			title: '文件名称',
			dataIndex: 'fileName',
			edit: true,
			width: 200,
		},
		{
			title: '文件大小',
			dataIndex: 'fileSize',
			edit: false,
			width: 200,
		},
		{
			title: '文件类型',
			dataIndex: 'fileType',
			edit: false,
			width: 200,
		},
	];
	const [registerTable, { reload, }] = useTable({
		//title: '可编辑单元格示例',
		api: list,
		columns: columns,
		showIndexColumn: false,
		bordered: true,
		rowKey: "id",
	});

	/**
	 * 成功回调
	 */
	function handleSuccess() {
		reload()
	}

	/**
	 * 新增事件
	 */
	function handleAdd() {
		registerModal.value.disableSubmit = false;
		registerModal.value.add();
	}

	/**
	 * 编辑事件
	 */
	function handleEdit(record : Recordable) {
		registerModal.value.disableSubmit = false;
		registerModal.value.edit(record);
	}

	/**
	 * 查询
	 */
	function searchQuery() {
		reload();
	}

	function handleMenuClick(menuClickData) {
		if (menuClickData.key == "1") {
			handleEdit({ izFolder: "0", izStar: "0" })
		} else if (menuClickData.key == "2") {
			handleEdit({ izFolder: "2", izStar: "0" })
		} else if (menuClickData.key == "3") {
			handleEdit({ izFolder: "1", izStar: "0" })
		}
	}

	function handleEditEnd({ record, index, key, value } : Recordable) {
		feakSave({ id: record.id, key, value });
	}

	// 模拟将指定数据保存
	function feakSave({ id, key, value }) {
		updateById({ "id": id, "fileName": value }).then(res => {
			if (res.success) {
				createMessage.success(res.message);
				emit('ok');
			} else {
				createMessage.warning(res.message);
			}
		})
	}
</script>

<style>

</style>